<template>
  <div class="component_payment_box">
    <van-cell is-link title="付款账号" @click="showPayerPopup">
      <template #default>{{payerAcNo | carNoEnCode}}</template>
    </van-cell>
    <van-cell title="" class="balance">
      <template #default>
        <span v-if="currency" class="currency">{{currencyMap[currency]}}</span>
        余额：{{ payerAcBalance |currency('')}}元
      </template>
    </van-cell>
    <van-popup class="payer_account_list_popup"
               :close-on-click-overlay="false"
               v-model="showPayer"
               position="bottom"
               :style="{ height: '24%' }">
      <van-picker show-toolbar value-key="acName"
                  :loading="isLoading"
                  :columns="columns"
                  visible-item-count="3"
                  @confirm="onConfirm"
                  @cancel="onCancel" />
    </van-popup>
  </div>
</template>

<script>
import { Popup, Picker } from 'vant';
import { queryAccountsBanlance } from '@/libs/api';
import Constants from '@/libs/constant';

export default {
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker
  },
  data() {
    return {
      currencyMap: Constants.currencyMap,
      columns: [],
      showPayer: false,
      isLoading: false,
      payerAcNo: '',
      payerAcBalance: 0,
      currency: ''
    };
  },
  methods: {
    showPayerPopup() {
      this.showPayer = true;
      this.queryAccountInfo();
    },
    queryAccountInfo() {
      this.isLoading = true;
      const qryParam = {
        cstNo: this.$store.state.loginUser.cichno,
        hostNo: this.$store.state.loginUser.cino,
        operNo: this.$store.state.loginUser.userId,
        serviceName: 'BASIC_Q_queryAccountsBanlance',
        pageIndex: 1,
        pageNum: 10
      };
      queryAccountsBanlance(this, qryParam).then((res) => {
        this.isLoading = false;
        if (res.retCode === 'CIP0000000') {
          if (res.acNAmouns && res.acNAmouns.length) {
            this.columns = res.acNAmouns;
          }
        }
      }).catch((e) => {
        console.error(e);
        this.isLoading = false;
      });
    },
    onConfirm(value) {
      this.showPayer = false;
      this.payerAcNo = value.acNo;
      this.payerAcBalance = value.currentBalance;
      this.currency = value.currency;
      this.$emit('onChange', value);
    },
    onCancel() {
      this.showPayer = false;
    }
  }
};
</script>

<style lang="less">
.component_payment_box {
  padding-top: 1vh;
  .balance .van-cell__value {
    color: #223968;
    flex-grow: 8;
  }
  .currency {
    background: rgba(#0173FF, 0.1);
    border-radius: 4px;
    color: #0173FF;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.188rem;
  }
}
</style>
